<template>
	<u-popup :show="show" @close="onClose" mode="bottom" round="20">
		<view class="city-picker">
			<view class="picker-header">
				<text class="cancel" @tap="onClose">取消</text>
				<text class="title">选择城市</text>
				<text class="confirm" @tap="onConfirm">确定</text>
			</view>

			<view class="picker-content">
				<scroll-view class="picker-column" scroll-y>
					<view class="picker-item" :class="{ active: currentProvince.id === item.id }"
						v-for="item in provinceList" :key="item.id" @tap="selectProvince(item)">
						{{ item.name }}
					</view>
				</scroll-view>

				<scroll-view class="picker-column" scroll-y>
					<view class="picker-item" :class="{ active: currentCity.id === item.id }" v-for="item in cityList"
						:key="item.id" @tap="selectCity(item)">
						{{ item.name }}
					</view>
				</scroll-view>
			</view>
		</view>
	</u-popup>
</template>

<script>
	export default {
		name: 'CityPicker',
		props: {
			show: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				provinceList: [], // 省份列表
				currentProvince: {}, // 当前选中的省
				currentCity: {}, // 当前选中的市
				cityList: [], // 城市列表
			}
		},
		watch: {
			show(val) {
				if (val) {
					this.getAreaList()
				}
			}
		},
		methods: {
			// 获取地区数据
			getAreaList() {
				this.$http_api.areaTreeList({}).then(res => {
					this.provinceList = res
					// 重置选择状态
					this.currentProvince = {}
					this.currentCity = {}
					this.cityList = []
				})
			},

			// 选择省份
			selectProvince(province) {
				this.currentProvince = province
				this.cityList = province.children || []
				this.currentCity = {}
			},

			// 选择城市
			selectCity(city) {
				this.currentCity = city
			},

			// 确认选择
			onConfirm() {
				if (!this.currentProvince.id || !this.currentCity.id) {
					uni.$u.toast('请选择省份和城市')
					return
				}

				const result = {
					province: {
						id: this.currentProvince.id,
						name: this.currentProvince.name
					},
					city: {
						id: this.currentCity.id,
						name: this.currentCity.name
					}
				}

				this.$emit('confirm', result)
				this.onClose()
			},

			// 关闭弹窗
			onClose() {
				this.$emit('update:show', false)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.city-picker {
		background: #FFFFFF;

		.picker-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx;
			border-bottom: 1rpx solid #EEEEEE;

			.cancel {
				color: #666666;
				font-size: 28rpx;
			}

			.title {
				color: #333333;
				font-size: 32rpx;
				font-weight: bold;
			}

			.confirm {
				color: #1C6EFB;
				font-size: 28rpx;
			}
		}

		.picker-content {
			display: flex;
			height: 600rpx;

			.picker-column {
				flex: 1;
				height: 100%;
				border-right: 1rpx solid #EEEEEE;

				&:last-child {
					border-right: none;
				}

				.picker-item {
					padding: 25rpx 20rpx;
					font-size: 28rpx;
					color: #333333;

					&.active {
						color: #1C6EFB;
						background: #F5F5F5;
					}
				}
			}
		}
	}
</style>